<template>
  <div class="sale-container">
    <!-- <CheckInput :modelValue="inputRef" @update:modelValue="inputRef = $event"/>  -->
    <h1>销售商品：</h1>
    <div class="saleList">
      <CheckInput
        v-for="item in salesList"
        :key="item.id"
        v-model="item.onSale"
        v-model:title="item.name"
      />
    </div>
    <h1>销售中：</h1>
    <ul class="saleList">
      <li v-for="item in onSaleList">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import CheckInput from "../components/CheckInput.vue";
import { ref, computed } from "vue";
export default {
  components: {
    CheckInput,
  },
  setup() {
    let salesList = ref([
      { id: "001", name: "小米", onSale: true },
      { id: "002", name: "华为", onSale: false },
      { id: "003", name: "魅族", onSale: true },
    ]);
    let inputRef = ref("asdfaf");
    let checkRef = ref(true);
    let onSaleList = computed(() => {
      return salesList.value.filter((ele) => ele.onSale);
    });
    return {
      inputRef,
      checkRef,
      salesList,
      onSaleList,
    };
  },
};
</script>

<style scoped>
.saleList {
  display: flex;
  justify-content: space-around;
}
</style>